<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>棒棒糖</title>
		<style>
			/*画圆*/
			#d1{
				width: 500px;
				height: 500px;
				/*画圆：边框、背景色*/
				background-color: #ffaa00;
				/*边框倒角条件：边框或背景色*/
				border-radius: 50%;
				/*微调定位*/
				position: relative;
				left: 230px;
				top: 20px;
			}
			#d2{
				width: 400px;
				height: 400px;
				/*画圆：边框、背景色*/
				background-color: #0000ff;
				/*边框倒角条件：边框或背景色*/
				border-radius: 50%;
				/*定位属性：元素直接定位到页面上*/
				/*相对定位：相对于父级元素进行定位；网页 X Y轴*/
				position: relative;
				left: 50px; /*X轴 横向*/
				top: 50px; /*Y轴 横向*/
			}
			#d3{
				width: 300px;
				height: 300px;
				/*画圆：边框、背景色*/
				background-color: #aa0000;
				/*边框倒角条件：边框或背景色*/
				border-radius: 50%;
				/*定位属性：元素直接定位到页面上*/
				/*相对定位：相对于父级元素进行定位；网页 X Y轴*/
				position: relative;
				left: 50px; /*X轴 横向*/
				top: 50px; /*Y轴 横向*/
			}
			/*棍子*/
			p{
				width: 40px;
				height: 500px;
				background-color: #aaaaff;
				transform: rotate(-30deg);
				/*微调定位*/
				position: relative;
				left: 721px;
				top: -70px;
			}
		</style>
	</head>
	<body>
		<!--画三个圆-->
		<div id="d1">
			<div id="d2">
				<div id="d3"></div>
			</div>
		</div>
		<!--画棍-->
		<p></p>
	</body>
</html>